import { Table, Input, Button, Col, Row, Form, Select, Pagination, message } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.module.scss'
import { SearchOutlined } from '@ant-design/icons'
import { current } from '@reduxjs/toolkit';
import { useNavigate } from 'react-router-dom';
import { getAppoint } from '@/service'
import { TimeConversion } from "@/utils";
const Option = Select.Option;
import { useTranslation } from 'react-i18next';


export default (props) => {
    const { t } = useTranslation();
    const [messageApi, contextHolder] = message.useMessage();
    const [form] = Form.useForm(); // 创建表单实例
    const initState = () => ({
        total: '',
        pageSize: 10,
        currentPage: 1,
        appointList: []
    }),
        navigate = useNavigate(),
        [state, setState] = useState(initState);
    const columns = [
        {
            title: t('menu.preview.table.order'),
            width: 80,
            render: (text, record, index) => index + 1,
        },
        {
            title: t('menu.preview.table.name'),
            dataIndex: 'workstationId',

        },
        {
            title: t('menu.preview.table.appiontTime'),
            dataIndex: 'appointmentTime',
            render(_col, item) {
                return TimeConversion(item.appointmentTime)
            },
        },
        {
            title: t('menu.preview.table.createTime'),
            dataIndex: 'usageStartTime',
            render(_col, item) {
                return TimeConversion(item.usageStartTime)
            },
        },
        {
            title: t('menu.preview.table.endTime'),
            dataIndex: 'usageEndTime',
            render(_col, item) {
                return TimeConversion(item.usageStartTime)
            },
        },
    ];
    const handlePageChange = (page) => {
        setState(prevParams => ({ ...prevParams, currentPage: page }));
    };
    const handlePageSizeChange = (currentPage, pageSize) => {
        setState(prevParams => ({ ...prevParams, currentPage, pageSize }));
    };
    const goBack = () => {
        navigate('/');
    }
    const getAppointList = () => {
        let params = {
            pageNo: state.currentPage,
            pageSize: state.pageSize
        }
        getAppoint(params).then(res => {
            if (res.code == 0) {
                setState(o => ({
                    ...o,
                    appointList: res?.data?.records || [],
                    total: res?.data?.total || 0,
                }));
            } else {
                messageApi.open({
                    type: 'error',
                    content: res?.msg,
                });
            }
        }).catch(e => {
            messageApi.open({
                type: 'error',
                content:e?.msg,
            });
        });
    }
    useEffect(() => {
        getAppointList();
    }, [state.currentPage, state.pageSize])
    return (
        <div className='page-container'>
            <div className={styles.content}>
                <div className={styles.tableCount}>
                    <Row className={styles.titBlock}>
                        <Col span={12}>
                            <div className='custom-title'>{t('menu.preview.title')}</div>
                        </Col>
                        <Col span={12} className={styles.RightBlcok}>
                            <Button type='primary' className='custom-btn-back' onClick={goBack}>{t('common.goback.text')}</Button>
                        </Col>
                    </Row>
                    <Table rowKey={'id'} className='custom-table' pagination={false} columns={columns} dataSource={state.appointList} />
                    <div className='custom-Pagination'>
                        <Pagination
                            total={state?.total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={(totalNum) => `${t('common.pagination.totalText')} ${totalNum} ${t('common.pagination.itemText')}`}
                            align="center"
                            current={state?.currentPage}
                            defaultPageSize={state?.pageSize}
                            onChange={handlePageChange}
                            onShowSizeChange={handlePageSizeChange}
                        />
                    </div>
                </div>

            </div>
            {contextHolder}
        </div>
    )
}